<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <title>电影信息管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
</head>

<body class="app sidebar-mini">
<!-- Navbar-->
<header th:replace="_fregments :: header" class="app-header"><a class="app-header__logo" href="index.html">挚夕影院</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search">
            <button class="app-search__button"><i class="bi bi-search"></i></button>
        </li>

        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-bs-toggle="dropdown" aria-label="Open Profile Menu"><i
                class="bi bi-person fs-4"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li><a class="dropdown-item" href="page-user.html"><i class="bi bi-gear me-2 fs-5"></i> 设置</a></li>
                <li><a class="dropdown-item" href="page-login.html"><i class="bi bi-box-arrow-right me-2 fs-5"></i> 登出</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside th:replace="_fregments :: menu(2, 1)" class="app-sidebar">
    <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="../../static/images/me.jpg"
                                        alt="User Image">
        <div>
            <p class="app-sidebar__user-name">Dylan</p>
            <p class="app-sidebar__user-designation">Backend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <!-- 仪表盘 -->
        <li>
            <a class="app-menu__item" href="../index.html">
                <i class="app-menu__icon bi bi-speedometer"></i>
                <span class="app-menu__label">仪表盘</span>
            </a>
        </li>
        <!-- 影院管理 -->
        <li class="treeview">
            <a class="app-menu__item " href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-house"></i>
                <span class="app-menu__label">影院管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item " href="../cinema/cinema_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item " href="../cinema/cinema_brand.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院品牌管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 电影管理 -->
        <li class="treeview is-expanded">
            <a class="app-menu__item active" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-camera-reels"></i>
                <span class="app-menu__label">电影管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item active" href="../movie/movie_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_comment.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影评论管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_age.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影年代管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影类别管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_runtime.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影播放时段管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 影厅管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bank"></i>
                <span class="app-menu__label">影厅管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../hall/hall_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../hall/hall_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅类别管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 场次管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bell"></i>
                <span class="app-menu__label">场次管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../session/session_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        场次信息管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 演员管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-people"></i>
                <span class="app-menu__label">演员管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../actor/actor_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../actor/actor_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员角色管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 用户管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-person"></i>
                <span class="app-menu__label">用户管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../user/user_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_order.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        订单信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户角色管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>
<main class="app-content">

    <!-- Modal 开始-->
    <div class="modal fade" id="movieModal" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel1">添加影院</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalInputMovieName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>电影名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modalInputMovieName">
                            <input type="hidden" class="form-control" id="modalInputMovieId">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectMovieArea" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>电影区域</label>
                        <div class="col-sm-9">
                            <select class="form-select" aria-label="Default select example" id="modalSelectMovieArea">
                                <option th:each="area : ${movieAreas}" th:value="${area.id}" th:text="${area.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectMovieAge" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>电影年代</label>
                        <div class="col-sm-9">
                            <select class="form-select" aria-label="Default select example" id="modalSelectMovieAge">
                                <option th:each="age : ${movieAges}" th:value="${age.id}" th:text="${age.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputMovieLength" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>电影时长</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" id="modalInputMovieLength">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputMovieReleaseDate"
                               class="col-sm-3 col-form-label">
                            <span style="color: red;">*&nbsp;</span>上映时间</label>
                        <div class="col-sm-9">
                            <input type="datetime-local" class="form-control" step="01" id="modalInputMovieReleaseDate">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputMovieIntroduction" class="col-sm-3 col-form-label">
                            <span style="color: red;">*&nbsp;</span>电影简介</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="modalInputMovieIntroduction"></textarea>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputMoviePoster"
                               class="col-sm-3 col-form-label"><span style="color: red;">*&nbsp;</span>电影封面</label>
                        <div class="col-sm-9">
                            <input type="file" class="form-control" id="modalInputMoviePoster">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputMoviePicture"
                               class="col-sm-3 col-form-label"><span style="color: red;">*&nbsp;</span>电影图集</label>
                        <div class="col-sm-9">
                            <input type="file" class="form-control" multiple id="modalInputMoviePicture">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="saveMovieBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->

    <!-- 电影类型&演员信息 管理 Modal 开始-->
    <div class="modal modal-lg fade" id="movieManagementModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div th:fragment="modalData" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">电影类型&演员信息 管理</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalSelectMovieType" class="col-sm-2 col-form-label">电影类型</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-sm-9">
                                    <input type="hidden" id="manageModalMovieId" th:value="${movieId}">
                                    <select class="form-control" id="modalSelectMovieType">
                                        <option th:each="type : ${modalSelectTypes}" th:value="${type.id}" th:text="${type.name}">爱情</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" id="modalSaveTypeBtn" class="btn btn-primary float-end">添加类型</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectMovieType" class="col-sm-2 col-form-label">已选类型</label>
                        <div class="col-sm-10">
                            <div th:each="type : ${modalSelectedTypes}" class="d-inline-block bg-primary text-white p-1 mb-3" style="border-radius: 5px;">
                                <span th:text="${type.name}">爱情</span>&nbsp;
                                <i th:data-id="${type.id}" class="bi bi-x close-btn deleteTypeBtn"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-2 col-form-label">人员属性</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-sm-5">
                                    <select class="form-control" id="modalSelectActorName">
                                        <option th:each="actor : ${modalSelectActors}" th:value="${actor.id}" th:text="${actor.name}">请选择人员</option>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <select class="form-control" id="modalSelectActorRole">
                                        <option th:each="role : ${modalSelectRoles}" th:value="${role.id}" th:text="${role.name}">请选择角色</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" id="modalSaveActorBtn" class="btn btn-primary float-end">保存人员</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-2 col-form-label">人员列表</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="accordion" id="accordionExample">
                                    <div class="accordion-item" th:each="item, step : ${modalSelectedActors}">
                                        <h2 class="accordion-header" th:id="heading + ${step.count}">
                                            <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse" th:data-bs-target="'#collapse' + ${step.count}"
                                                    aria-expanded="false" aria-controls="collapseOne" th:text="${item.roleName}">
                                                导演
                                            </button>
                                        </h2>
                                        <div th:id="collapse + ${step.count}" class="accordion-collapse collapse"
                                             th:aria-labelledby="heading + ${step.count}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div th:each="actorMovie : ${item.actors}" class="d-inline-block bg-primary text-white p-1 mb-3"
                                                     style="border-radius: 5px;">
                                                    <span th:text="${actorMovie.actorName}">韩延</span>&nbsp;
                                                    <i th:data-id="${actorMovie.id}" class="bi bi-x close-btn deleteActorBtn"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->
    <div class="app-title">
        <div>
            <h1><i class="bi bi-speedometer"></i> 电影信息管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
            <li class="breadcrumb-item"><a th:href="@{/movie/info}">电影管理</a></li>
            <li class="breadcrumb-item">电影信息管理</li>
        </ul>
    </div>
    <!-- 查询条件 -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <input type="text" id="inputMovieName" class="form-control" placeholder="请输入电影名称">
        </div>
        <div class="col-md-3">
            <select id="selectMovieArea" class="form-select" aria-label="Default select example">
                <option value="0" selected>请选择电影区域</option>
                <option th:each="area : ${movieAreas}" th:value="${area.id}" th:text="${area.name}">大陆</option>
            </select>
        </div>
        <div class="col-md-3">
            <select id="selectMovieAge" class="form-select" aria-label="Default select example">
                <option value="0" selected>请选择电影年代</option>
                <option th:each="age : ${movieAges}" th:value="${age.id}" th:text="${age.name}">大陆</option>
            </select>
        </div>
        <div class="col-md-3">
            <button type="button" id="searchBtn" class="btn btn-success">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#movieModal"
                    data-id="0">添加电影
            </button>
            <button type="button" id="deleteAllBtn" class="btn btn-danger">批量删除</button>
        </div>
    </div>
    <div id="table-container">
        <div th:fragment="movieList">
            <div class="row">
                <div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">
                                <input class="form-check-input" type="checkbox" id="checkAll">
                            </th>
                            <th scope="col">
                                电影名称
                            </th>
                            <th scope="col">
                                电影区域
                            </th>
                            <th scope="col">
                                电影年代
                            </th>
                            <th scope="col">
                                上映时间
                            </th>
                            <th scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="movie : ${moviePage.records}">
                            <th scope="row">
                                <input class="form-check-input deleteCheck" type="checkbox" th:value="${movie.id}">
                            </th>
                            <td th:text="${movie.name}">送你一朵小红花</td>
                            <td th:text="${movie.movieArea.name}">大陆</td>
                            <td th:text="${movie.movieAge.name}">2021</td>
                            <td th:text="${#dates.format(movie.releaseDate, 'yyyy-MM-dd HH:mm:ss')}">2020-12-31
                                18:00:00
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary updateBtn" data-bs-toggle="modal"
                                        data-bs-target="#movieModal" th:data-id="${movie.id}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" th:data-id="${movie.id}" class="btn btn-danger deleteBtn">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <button type="button" class="btn btn-success manageBtn"
                                        data-bs-target="#movieManagementModal"
                                        data-bs-toggle="modal" th:data-id="${movie.id}">
                                    <i class="bi bi-gear"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--分页条-->
            <div class="row">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${!moviePage.hasPrevious()} ? 'disabled'">
                            <a th:data-pageNo="${moviePage.current - 1}" class="page-link">上一页</a>
                        </li>
                        <!-- 最多显示五个页码按钮-->
                        <!-- 小于等于5页，全部显示-->
                        <th:block th:if="${moviePage.getPages() <= 5}">
                            <!--考虑一页都没有的情况-->
                            <th:block th:if="${moviePage.getPages() > 0}">
                                <li th:each="i : ${#numbers.sequence(1,moviePage.getPages())}" class="page-item">
                                    <a class="page-link" th:classappend="${i == moviePage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <!-- 大于5页，分情况-->
                        <th:block th:if="${moviePage.getPages() > 5}">
                            <!-- 后面有两页及以上-->
                            <th:block th:if="${moviePage.getPages() >= moviePage.current + 2}">
                                <!-- no < 3 不居中-->
                                <th:block th:if="${moviePage.current < 3}">
                                    <li th:each="i : ${#numbers.sequence(1, 5)}" class="page-item">
                                        <a class="page-link" th:classappend="${i == moviePage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                                <!-- 大于2可居中-->
                                <th:block th:if="${moviePage.current >= 3}">
                                    <li th:each="i : ${#numbers.sequence(moviePage.current - 2, moviePage.current + 2)}"
                                        class="page-item" th:classappend="${moviePage.current == i} ? 'active'">
                                        <a class="page-link"
                                           th:classappend="${i == moviePage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                            </th:block>
                            <!-- 当前页码后面不足两页-->
                            <th:block th:if="${moviePage.getPages() < moviePage.current + 2}">
                                <li th:each="i : ${#numbers.sequence(moviePage.getPages() - 4, moviePage.getPages())}"
                                    class="page-item" th:classappend="${moviePage.current == i} ? 'active'">
                                    <a class="page-link"
                                       th:classappend="${i == moviePage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <li class="page-item" th:classappend="${!moviePage.hasNext()} ? 'disabled'">
                            <a th:data-pageNo="${moviePage.current + 1}" class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>


</main>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../../static/js/jquery-3.7.0.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/main.js"></script>
<!--/*/</th:block>/*/-->


<script type="text/javascript">
    function clearMovieModalInput() {
        $("#modalInputMovieId").val('')
        $("#modalInputMovieName").val('')
        $("#modalSelectMovieArea").val($("#modalSelectMovieArea:first-child").val())
        $("#modalSelectMovieAge").val($("#modalSelectMovieAge:first-child").val())
        $("#modalInputMovieLength").val('')
        $("#modalInputMovieReleaseDate").val('')
        $("#modalInputMovieIntroduction").val('')
        $("#modalInputMoviePoster").val('')
        $("#modalInputMoviePicture").val('')
    }
    function page(pageNo) {
        //收集参数
        var movieName = $.trim($("#inputMovieName").val());
        var areaId = $("#selectMovieArea").val()
        if (areaId == 0) {   //未选中搜索条件
            areaId = null
        }
        var ageId = $("#selectMovieAge").val()
        if (ageId == 0) {   //未选中搜索条件
            ageId = null
        }
        //加载数据
        $("#table-container").load(/*[[@{/movie/info/search}]]*/"/movie/info/search", {
            pageNo: pageNo,
            pageSize: 10,
            name: movieName,
            areaId: areaId,
            ageId: ageId
        });
    }
    function loadManageModalData(id){
        $("#movieManagementModal").load(/*[[@{/movie/info/manage}]]*/"/movie/info/manage", {
            movieId: id
        });
    }

    $(function () {
        //全选
        $("#table-container").on('click', '#checkAll', function () {
            $(".deleteCheck").prop("checked", this.checked);
        });
        $("#table-container").on('click', '.deleteCheck', function () {
            $("#checkAll").prop("checked",
                $(".deleteCheck").length == $(".deleteCheck:checked").length);
        });

        const movieModal = document.getElementById('movieModal')
        movieModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-bs-* attributes
            const id = button.getAttribute('data-id')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            const modalTitle = movieModal.querySelector('.modal-title')
            if (id != '0') { //修改
                modalTitle.textContent = '修改电影';
                $.ajax({
                    url: '[[@{/movie/info/}]]' + id,
                    type: 'get',
                    success: function (response) {
                        if (response.status == 'success') {
                            var movie = response.data
                            $("#modalInputMovieId").val(movie.id)
                            $("#modalInputMovieName").val(movie.name)
                            $("#modalSelectMovieArea").val(movie.areaId)
                            $("#modalSelectMovieAge").val(movie.ageId)
                            $("#modalInputMovieLength").val(movie.length)
                            $("#modalInputMovieReleaseDate").val(movie.releaseDate)
                            $("#modalInputMovieIntroduction").val(movie.introduction)
                            $("#modalInputMoviePoster").val('')
                            $("#modalInputMoviePicture").val('')
                        }
                    }
                })
            } else {
                modalTitle.textContent = '添加电影'
                clearMovieModalInput()
            }
            // Update the modal's content.

            // const modalBodyInput = movieModal.querySelector('.modal-body input')

            // modalTitle.textContent = `New message to ${id}`
            // modalBodyInput.value = id
        })

        //保存 电影
        $("#saveMovieBtn").click(function () {
            var id = $("#modalInputMovieId").val()
            var name = $("#modalInputMovieName").val()
            var areaId = $("#modalSelectMovieArea").val()
            var ageId = $("#modalSelectMovieAge").val()
            var length = $("#modalInputMovieLength").val()
            var releaseDate = $("#modalInputMovieReleaseDate").val()
            //格式化
            releaseDate = releaseDate.replace('T',' ')

            var introduction = $("#modalInputMovieIntroduction").val()
            var poster = $("#modalInputMoviePoster")[0].files
            var picture = $("#modalInputMoviePicture")[0].files

            var formData = new FormData()
            //文件
            for (let i = 0; i < poster.length; i++) {
                formData.append("posters", poster.item(i)) // 向相同键添加可叠加文件
            }
            for(let i = 0; i < picture.length; i++){
                formData.append("pictureFiles", picture.item(i))
            }
            //文本
            formData.append('id', id)
            formData.append('name', name)
            formData.append('areaId', areaId)
            formData.append('ageId', ageId)
            formData.append('length', length)
            formData.append('releaseDate', releaseDate)
            formData.append('introduction', introduction)

            $.ajax({
                url: '[[@{/movie/info}]]',
                type: id ? 'put' : 'post',
                data: formData,
                processData: false, // processData和contentType必须是false
                contentType: false,
                async: true
            }).then(res => {
                if (res.status == 'success') {
                    toastr.success(res.data, 'success');
                    page(1)
                    $("#movieModal").modal('hide')
                } else {
                    console.log(res)
                    toastr.warning(res.data.errorMessage, 'warning');
                }
            })
        })
        //删除电影
        $("#table-container").on('click', '.deleteBtn', function (){
            var id = $(this).data('id')
            $.ajax({
                url: '[[@{/movie/info/}]]' + id,
                type: 'delete',
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        page(1)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })

        //批量删除电影
        $("#deleteAllBtn").click(function (){
            var movieIds = $(".deleteCheck:checked")
            if(movieIds.length == 0){
                swal('请勾选要删除的电影')
                return
            }
            var ids = ''
            $.each(movieIds, function (){
                ids += 'id=' + this.value + '&'
            })
            ids = ids.substring(0, ids.length - 1)
            swal("确认删除选中吗?", {
                buttons: ["取消", "确认"],
            }).then((value) => {
                // 点击取消 value=null
                // 点击确认 value=true
                if (value) {
                    $.ajax({
                        url: '[[@{/movie/info}]]',
                        type: 'delete',
                        data: ids,
                        success: function (response) {
                            if (response.status == 'success') {
                                //加载表格数据
                                page(1)
                                swal(response.data);
                            } else {
                                swal(response.data.errorMessage)
                            }
                        },
                        error: function (response) {
                            swal(response.responseText)
                        }
                    })
                }
            });
        })
        //搜索
        $("#searchBtn").click(function (){
            page(1)
        })
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            var pageNo = $(this).data('pageno')
            page(pageNo)
        })

        //****** 以下是电影类型&演员信息 模态框部分*********
        const movieManagementModal = document.getElementById('movieManagementModal')
        movieManagementModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            const id = button.getAttribute('data-id')
            if (id != '0') {
                //加载电影类型 和 已选类型
                loadManageModalData(id)
            }
        })
        //绑定类型
        $("#movieManagementModal").on('click', '#modalSaveTypeBtn', function (){
            var movieId = $("#manageModalMovieId").val()
            var typeId = $("#modalSelectMovieType").val()
            $.ajax({
                url: '[[@{/movie/movieToType}]]',
                type: 'post',
                data: {
                    movieId: movieId,
                    typeId: typeId
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        loadManageModalData(movieId)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //删除绑定类型
        $("#movieManagementModal").on('click', '.deleteTypeBtn', function (){
            var movieId = $("#manageModalMovieId").val()
            var typeId = $(this).data('id')
            $.ajax({
                url: '[[@{/movie/movieToType}]]',
                type: 'delete',
                data: {
                    movieId: movieId,
                    typeId: typeId
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        loadManageModalData(movieId)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //添加演员
        $("#movieManagementModal").on('click', '#modalSaveActorBtn', function (){
            var actorId = $("#modalSelectActorName").val()
            var movieId = $("#manageModalMovieId").val()
            var actorRoleId = $("#modalSelectActorRole").val()
            $.ajax({
                url: '[[@{/movie/actor}]]',
                type: 'post',
                data: {
                    actorId: actorId,
                    movieId: movieId,
                    actorRoleId: actorRoleId
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        loadManageModalData(movieId)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //删除演员
        $("#movieManagementModal").on('click', '.deleteActorBtn', function (){
            var id = $(this).data('id')
            var movieId = $("#manageModalMovieId").val()
            $.ajax({
                url: '[[@{/movie/actor/}]]' + id,
                type: 'delete',
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                        loadManageModalData(movieId)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
    });

</script>
</body>

</html>